import { Button, Col, Statistic, Row, Form, Input } from 'antd';
import type { CountdownProps } from 'antd';
import './index.scss';
import { serviceConfig } from '@/config/request/swaggerServiceConfig';

/** 接口前缀 */
const newConfig = { ...serviceConfig };

const Home: React.FC = () => {
    const { Countdown } = Statistic;
    const [form] = Form.useForm();

    const deadline = Date.now() + 1000 * 60 * 60 * 24 * 2 + 1000 * 30; // Dayjs is also OK

    const onFinish: CountdownProps['onFinish'] = () => {
        console.log('finished!');
    };

    const onChange: CountdownProps['onChange'] = (val) => {
        if (typeof val === 'number' && 4.95 * 1000 < val && val < 5 * 1000) {
            console.log('changed!');
        }
    };

    return (
        <div>
            <div className="opshomeHeader">
                <b style={{ color: 'red' }}>访问OPS需要先登录!!!</b>
                <Button type="primary">
                    <a href="/opsManager/login">登录</a>
                </Button>
            </div>

            <div>
                <form
                    id="loginForm"
                    style={{ display: 'none' }}
                    target="_self"
                    action="https://signin.aliyun.com/login.htm"
                    method="POST"
                >
                    <input
                        type="text"
                        name="user_principal_name"
                        value="sniff_read@1515857737718697.onaliyun.com"
                    />
                    <input
                        type="text"
                        name="password_ims"
                        value="Snif)fdK893@sdK1"
                    />
                </form>
                <a
                    href="javascript:document.querySelector('#loginForm').submit()"
                    onClick={() => {
                        const host = window.location.host;
                        setTimeout(() => {
                            window.location.href = host + '/opsManager/home';
                            window.open('https://dms.aliyun.com/');
                        }, 1000);
                    }}
                >
                    跳转到阿里云
                </a>
            </div>

            <Row gutter={16}>
                <Col span={12}>
                    <Countdown
                        title="Countdown"
                        value={deadline}
                        onFinish={onFinish}
                    />
                </Col>
                <Col span={12}>
                    <Countdown
                        title="Million Seconds"
                        value={deadline}
                        format="HH:mm:ss:SSS"
                    />
                </Col>
                <Col span={24} style={{ marginTop: 32 }}>
                    <Countdown
                        title="Day Level"
                        value={deadline}
                        format="D 天 H 时 m 分 s 秒"
                    />
                </Col>
                <Col span={12}>
                    <Countdown
                        title="Countdown"
                        value={Date.now() + 10 * 1000}
                        onChange={onChange}
                    />
                </Col>
            </Row>
        </div>
    );
};

export default Home;
